<template>
    <div class="family-page" :style="{ backgroundImage: `url(${selectBGinfo.mainBgUrl})`, backgroundRepeat: 'no-repeat',
    backgroundSize: '100% 100%', '--tagColor': tagColor }">
        <!-- :style="{ backgroundImage: `url(${selectBGinfo.mainBgUrl})` }" -->
        <!-- <img :src="selectBGinfo.mainBgUrl" alt="" class="bgImg"> -->
        <!-- 顶部背景区域 -->
        <div class="hero-section">
            <div class="hero-background">
                <!-- 背景图片占位 -->
                <img :src="selectBGinfo.headerBgUrl" alt="背景图" class="bg-image" />
                <div class="hero-overlay">
                    <h1 class="family-title" :style="{color: selectBGinfo.navBgColor}">{{ familyInfo.name || '王氏集体' }}</h1>
                </div>
            </div>
        </div>

        <!-- 导航栏 -->
        <nav class="main-nav" :style="{backgroundColor: selectBGinfo.navBgColor}">
            <div class="nav-container">
                <span @click="goToPath('familyHome')" class="nav-item" :class="pathType == 'familyHome' ? 'active' : ''">首页</span>
                <span @click="goToPath('introduce')" class="nav-item" :class="pathType == 'introduce' ? 'active' : ''">集体馆介绍</span>
                <span @click="goToPath('article1')" class="nav-item" :class="pathType == 'article1' ? 'active' : ''">集体馆记事</span>
                <span @click="goToPath('article2')" class="nav-item" :class="pathType == 'article2' ? 'active' : ''">集体馆文化</span>
                <span @click="goToPath('personage')" class="nav-item" :class="pathType == 'personage' ? 'active' : ''">人物纪念</span>
                <span @click="goToPath('leavel')" class="nav-item" :class="pathType == 'leavel' ? 'active' : ''">追思留言</span>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <el-main class="main-content">
            
            <div class="content-wrapper" v-if="pathType == 'familyHome'">
                <!-- 左侧内容 -->
                <div class="left-content">
                    <!-- 导语部分 -->
                    <section class="intro-section">
                        <h2>导语</h2>
                        <p v-if="familyInfo.intro">{{ familyInfo.intro || '' }}</p>
                        <p v-else>暂无导语</p>
                    </section>

                    <!-- 人物纪念区 -->
                    <section class="memorial-section">
                        <h2>人物纪念馆</h2>
                        <div class="memorial-grid" v-if="memorialPersons.length > 0">
                            <div class="memorial-item" v-for="person in memorialPersons" :key="person.mu_id"
                                @click="goToMuDetail(person.mu_id)">
                                <img :src="person.avatar" :alt="person.mu_name" class="person-avatar" />
                                <div class="person-name">{{ person.mu_name }}</div>
                            </div>
                        </div>
                        <div v-else style="width: 100%; text-align: center;">
                            <el-empty description="暂无人物纪念" />
                        </div>
                    </section>

                    <!-- 集体动态 -->
                    <section class="news-section">
                        <h2>集体动态</h2>
                        <div class="news-list" v-if="familyNews.length > 0">
                            <div class="news-item" v-for="news in familyNews" :key="news.id"
                                @click="goToArticleDetail(news.id)">
                                <div class="news-avatar">
                                    <img :src="news.avatar || ''" :alt="news.title" />
                                </div>
                                <div class="news-content">
                                    <div class="news-text">{{ news.title }}</div>
                                    <div class="news-meta">
                                        <span class="news-author">发布时间：{{ news.create_time }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="more-news" v-if="familyNews.length > 0">
                            <span @click="goToPath('article1')" :style="{color: selectBGinfo.navBgColor}">更多集体记事</span>
                        </div>
                        <div v-else style="width: 100%; text-align: center;">
                            <el-empty description="暂无集体记事" />
                        </div>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <div class="right-sidebar">
                    <!-- 追思留言 -->
                    <section class="message-section">
                        <h3>追思留言</h3>
                        <div class="message-form">
                            <el-form ref="ruleFormRef" :model="messageForm" :rules="rules" @submit.prevent="submitMessage(ruleFormRef)">
                                <el-form-item prop="content">
                                    <div class="form-row">
                                        <label>留言：</label>
                                        <el-input
                                            v-model="messageForm.content"
                                            type="textarea"
                                            placeholder="请输入留言内容"
                                            :rows="4"
                                            resize="none"
                                            class="custom-textarea"
                                        />
                                    </div>
                                </el-form-item>
                                
                                <el-form-item prop="sign_name">
                                    <div class="form-row">
                                        <label>署名：</label>
                                        <el-input
                                            v-model="messageForm.sign_name"
                                            placeholder="请输入您的姓名"
                                            class="custom-input"
                                        />
                                    </div>
                                </el-form-item>

                                <!-- 祭品分类选择 -->
                                <div class="tribute-categories" v-if="jidianCateList.length > 0">
                                    <div class="category-tabs">
                                        <div class="category-tab" v-for="category in jidianCateList" :key="category.id"
                                            :class="{ active: activeTab === category.id }"
                                            @click="changejidian(category.id)">
                                            {{ category.name }}
                                        </div>
                                    </div>
                                </div>

                                <!-- 祭品选择 -->
                                <div class="offerings" v-if="jidianList.length > 0">
                                    <div class="offering-item" v-for="offering in jidianList" :key="offering.id"
                                        @click="selectOffering(offering.id)"
                                        :class="{ active: selectedOffering === offering.id }">
                                        <img :src="offering.file_url" :alt="offering.name" />
                                        <span>{{ offering.name }}</span>
                                    </div>
                                </div>
                                <div v-else style="width: 100%; text-align: center;margin-bottom: 30px;">
                                    <el-empty description="暂无祭品" />
                                </div>
                                <el-button type="primary" class="submit-btn" @click="submitMessage(ruleFormRef)">提交</el-button>
                            </el-form>
                        </div>
                    </section>

                    <!-- 留言列表 -->
                    <section class="celebrity-section">
                        <h3>留言列表</h3>
                        <div class="celebrity-list" v-if="leaveNoteList.length > 0">
                            <div class="celebrity-item" v-for="message in leaveNoteList" :key="message.id">
                                <div class="celebrity-avatar">
                                    <img :src="message.jidian_info?.file_url || ''"
                                        :alt="message.jidian_info?.name || '祭品'" />
                                </div>
                                <div class="celebrity-info">
                                    <div class="celebrity-name">{{ message.sign_name }}</div>
                                    <div class="celebrity-desc">{{ message.content }}</div>
                                    <div class="celebrity-time">{{ message.create_time }}</div>
                                </div>
                            </div>
                        </div>
                        <div v-else style="width: 100%; text-align: center;">
                            <el-empty description="暂无留言" />
                        </div>
                    </section>

                    
                </div>
            </div>
            <div class="page-main-container intro-section" v-if="pathType == 'introduce'">
                <div class="page-main-title">
                    <h2>集体馆介绍</h2>
                </div>
                <div class="page-main-page-text">
                    <p style="text-indent: 2em;" v-if="familyInfo.desc">
                        {{ familyInfo.desc }}
                    </p>
                    <div v-else style="width: 100%; text-align: center;">暂无介绍</div>
                </div>
            </div>
            <div class="page-main-container intro-section" v-if="pathType == 'articleDetail'">
                <div class="page-main-title" style="display: flex; justify-content: space-between; align-items: center;padding: 10px 20px;width: 100%;box-sizing: border-box;">
                    <h2 style="margin-bottom: 0;">文章详情</h2>
                    <el-button class="return-btn" @click="pageTypeBack">返回</el-button>
                </div>
                <div class="page-main-page-text" style="margin-top: 10px;"  v-if="articleInfo.content">
                    <div style="font-size: 18px; font-weight: bold; margin-bottom: 20px;width: 100%;display: flex;justify-content: center;">{{ articleInfo.title }}</div>
                    <p style="text-indent: 2em;">
                        {{ articleInfo.content }}
                    </p>
                </div>
                <div v-else style="width: 100%; text-align: center;">暂无内容</div>
            </div>
            <div class="page-main-container" v-if="pathType == 'article1'">
                <div class="page-main-page-container">
                    <!-- 使用 Element Plus 的 Row 组件作为容器，gutter 属性可以添加列之间的间距 -->
                    <el-row class="page-main-container-wrapper" :gutter="20">
                        <!-- 左侧推荐文章栏，占据 24 份中的 6 份 -->
                        <el-col :span="6">
                            <div class="sidebar">
                                <h3 class="sidebar-title">推荐文章</h3>
                                <ul class="recommended-list" v-if="totalArticles.length > 0">
                                    <li v-for="article in totalArticles" :key="article.id">
                                        <span @click="goToArticleDetail(article.id)">{{ article.title }}</span>
                                    </li>
                                </ul>
                                <div v-else style="width: 100%; text-align: center;">暂无推荐文章</div>
                            </div>
                        </el-col>
                        <!-- 右侧主内容区，占据 24 份中的 18 份 -->
                        <el-col :span="18">
                            <div class="main-content">
                                <h2 class="main-title">集体馆记事</h2>
                                <div class="articles-list" v-if="dynamicList.length > 0">
                                    <ul>
                                        <li v-for="article in dynamicList" :key="article.id" class="article-item">
                                            <span @click="goToArticleDetail(article.id)" class="article-title">・ {{ article.title }}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div v-else style="width: 100%; text-align: center;">
                                    <el-empty description="暂无记事" />
                                </div>
                                <div class="pagination-summary" v-if="totalArticlesCount > 0">
                                    <span>文章总数:{{ totalArticlesCount }}</span>
                                    <!-- <span>分页:{{ currentPage }}/{{ totalPages }}</span> -->
                                </div>
                            </div>
                        </el-col>

                    </el-row>
                </div>
            </div>
            <div class="page-main-container" v-if="pathType == 'article2'">
                <div class="page-main-page-container">
                    <!-- 使用 Element Plus 的 Row 组件作为容器，gutter 属性可以添加列之间的间距 -->
                    <el-row class="page-main-container-wrapper" :gutter="20">
                        <!-- 左侧推荐文章栏，占据 24 份中的 6 份 -->
                        <el-col :span="6">
                            <div class="sidebar">
                                <h3 class="sidebar-title">推荐文章</h3>
                                <ul class="recommended-list" v-if="totalArticles.length > 0">
                                    <li v-for="article in totalArticles" :key="article.id">
                                        <span @click="goToArticleDetail(article.id)">{{ article.title }}</span>
                                    </li>
                                </ul>
                                <div v-else style="width: 100%; text-align: center;">暂无推荐文章</div>
                            </div>
                        </el-col>
                        <!-- 右侧主内容区，占据 24 份中的 18 份 -->
                        <el-col :span="18">
                            <div class="main-content">
                                <h2 class="main-title">集体馆文化</h2>
                                <div class="articles-list" v-if="cultureList.length > 0">
                                    <ul>
                                        <li v-for="article in cultureList" :key="article.id" class="article-item">
                                            <span @click="goToArticleDetail(article.id)" class="article-title">・ {{ article.title }}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div v-else style="width: 100%; text-align: center;">
                                    <el-empty description="暂无文化" />
                                </div>
                                <div class="pagination-summary" v-if="totalArticlesCount > 0">
                                    <span>文章总数:{{ totalArticlesCount }}</span>
                                    <!-- <span>分页:{{ currentPage }}/{{ totalPages }}</span> -->
                                </div>
                            </div>
                        </el-col>

                    </el-row>
                </div>
            </div>
            <div class="page-main-container" v-if="pathType == 'personage'">
                <div class="page-main-title">
                    <span>人物纪念</span>
                </div>
                <div class="page-main-page-container">
                    <el-row :gutter="20" class="memorial-hall-enhanced">
                        <el-col :span="24" >
                            <div class="person-list" v-if="pager.lists.length > 0">
                                <el-card v-for="(person, index) in pager.lists" :key="index" class="person-card" shadow="hover" @click="goToMuDetail(person.mu_id)">
                                    <div class="person-card-content">
                                        <el-avatar 
                                            :size="80" 
                                            :src="person.avatar" 
                                            class="person-avatar-enhanced"
                                            fit="cover"
                                        >
                                            <el-icon><User /></el-icon>
                                        </el-avatar>
                                        <div class="person-name-enhanced">{{ person.mu_name }}</div>
                                        <div class="person-card-overlay">
                                            <el-icon class="view-icon"><View /></el-icon>
                                            <span>查看详情</span>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                            <div v-else style="width: 100%; text-align: center;">
                                <el-empty description="暂无人物纪念" />
                            </div>
                            
                        </el-col>
                    </el-row>
                    <div class="flex justify-end mt-4">
                        <pagination v-model="pager" @change="getLists" ref="paginationRef"/>
                    </div>
                </div>
            </div>
            <div class="page-main-container" v-if="pathType == 'leavel'">
                <div class="page-main-title">
                    <span>追思留言</span>
                </div>
                <div class="page-main-page-container">
                    <div class="guestbook-list-enhanced">
                        <el-timeline class="timeline-enhanced">
                            <el-timeline-item 
                                v-for="(post, index) in leaveNoteList" 
                                :key="index" 
                                :timestamp="post.create_time"
                                placement="top"
                                class="timeline-item-enhanced"
                            >
                                <el-card class="message-card" shadow="hover">
                                    <div class="message-content">
                                        <div class="message-header">
                                            <el-avatar 
                                                :size="40" 
                                                :src="post.jidian_info.file_url" 
                                                class="message-avatar"
                                                fit="cover"
                                            >
                                                <el-icon><Message /></el-icon>
                                            </el-avatar>
                                            <div class="message-info">
                                                <div class="message-author">{{ post.sign_name }}</div>
                                                <div class="message-time">{{ post.create_time }}</div>
                                            </div>
                                        </div>
                                        <div class="message-text">
                                            <el-text class="message-content-text">{{ post.content }}</el-text>
                                        </div>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                        <div v-if="leaveNoteList.length === 0" class="empty-state">
                            <el-empty description="暂无留言" />
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        
        <!-- 浮动申请加入按钮 -->
        <el-button 
            type="primary" 
            @click="applyJoin" 
            class="floating-apply-btn"
            size="large"
            v-if="!checkUserJoin && familyInfo.user_id != userStore.userInfo.id"
        >
            <el-icon><Plus /></el-icon>
            申请加入
        </el-button>
        <el-button 
            type="primary" 
            @click="applyMuJoinOpen" 
            class="floating-apply-btn"
            size="large"
            v-if="checkUserJoin || familyInfo.user_id == userStore.userInfo.id"
        >
            <el-icon><Plus /></el-icon>
            申请墓地加入
        </el-button>
        
        <!-- 浮动二维码按钮 -->
        <el-button 
            type="success" 
            @click="showQRCode" 
            class="floating-qr-btn"
            size="large"
            circle
        >
            <el-icon><img src="../../../assets/icons/qrcodeIcon.svg" alt="二维码" style="width: 40px !important; height: 40px;" /></el-icon>
        </el-button>

        <!-- 申请墓地加入弹窗 -->
        <el-dialog 
            v-model="muJoinDialogVisible" 
            title="选择要加入的墓地" 
            width="600px"
            :before-close="handleDialogClose"
        >
            <div class="mu-list-container">
                <div 
                    v-for="mu in availableMuList" 
                    :key="mu.id"
                    class="mu-item"
                    :class="{ 'selected': selectedMuId === mu.id }"
                    @click="selectMu(mu.id)"
                >
                    <div class="mu-avatar">
                        <img :src="mu.avatar || '/default-avatar.png'" :alt="mu.mu_name" />
                        
                    </div>
                    <div class="mu-name">{{ mu.name }}</div>
                    <div class="selection-indicator" v-if="selectedMuId === mu.id">
                        <el-icon><Check /></el-icon>
                    </div>
                </div>
            </div>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleDialogClose">取消</el-button>
                    <el-button 
                        type="primary" 
                        @click="confirmMuJoin"
                        :disabled="!selectedMuId"
                    >
                        加入
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 二维码弹窗 -->
        <QrCodePage 
            v-model="dialogVisible" 
            :qr-value="qrValue" 
            title="集体二维码"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus, Download } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { familyDetail, mu_list, jidian_list, article_list, add_jidian, familyJoin_list, check_mu_join, mu_join, check_user_join, user_join, index_share_img } from '@/api/family'
import { apiMuJidianCate, apiMuJidianList } from '@/api/leaveNote'
import { apiMuGiftCate, apiMuGiftList } from '@/api/gift'
import { usePaging } from '@/hooks/usePaging'
import QrcodeVue from 'qrcode.vue'; // 导入 qrcode.vue 组件
import useUserStore from '@/stores/modules/user'

import QrCodePage from '@/components/qrCodePage.vue';

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()


// 页面模版
const tagColor = ref('')
const selectBGinfo = ref<{
    id?: number,
    headerBgUrl?: string,
    mainBgUrl?: string,
    navBgColor?: string,
}>({
    id: 0,
    headerBgUrl: '',
    mainBgUrl: '',
    navBgColor: '',
})
const styleObj = {
    '--tagColor': tagColor.value
}
// 页面状态
const pathType = ref('familyHome')
const selectedOffering = ref(0)
const activeTab = ref(0)
// 模版数据
const templateData = ref(
    [
        {
            id: 1, headerBgUrl: 'https://cqjsyh.com/uploads/images/20250709/20250709213259974ad0871.png', mainBgUrl: 'https://cqjsyh.com/uploads/images/20250710/20250710121109782a10572.png', navBgColor: '#EADDCD', '--tagColor': '#EADDCD'
        },
        {
            id: 2, headerBgUrl: 'https://cqjsyh.com/uploads/images/20250709/20250709213259339f97043.png', mainBgUrl: 'https://cqjsyh.com/uploads/images/20250710/20250710140552692d25492.png', navBgColor: '#EADDCD', '--tagColor': '#EADDCD'
        },
        {
            id: 3, headerBgUrl: 'https://cqjsyh.com/uploads/images/20250709/202507092132596a58b7514.png', mainBgUrl: 'https://cqjsyh.com/uploads/images/20250710/20250710132136daab92732.png', navBgColor: '#F0E6CE80', '--tagColor': '#F0E6CE80'
        },
        {
            id: 4, headerBgUrl: 'https://cqjsyh.com/uploads/images/20250709/202507092133000894e7842.png', mainBgUrl: 'https://cqjsyh.com/uploads/images/20250710/20250710140704d49a62053.png', navBgColor: '#E3E0D8', '--tagColor': '#E3E0D8'
        },
        {
            id: 5, headerBgUrl: 'https://cqjsyh.com/uploads/images/20250709/20250709213300e552d6678.png', mainBgUrl: 'https://cqjsyh.com/uploads/images/20250710/202507101407042c9982666.png', navBgColor: '#E3D7CC', '--tagColor': '#E3D7CC'
        }
    ]
)
// 表单数据
const messageForm = reactive({
    content: '',
    sign_name: ''
})

// 表单验证规则
const rules = reactive<FormRules>({
    content: [
        { required: true, message: '请输入留言', trigger: 'blur' }
    ],
    sign_name: [
        { required: true, message: '请输入留言人', trigger: 'blur' }
    ]
})

const ruleFormRef = ref<FormInstance>()

// 集体信息
const familyInfo = ref({
    name: '王氏集体',
    intro: '王姓是一个源头众多、族派纷繁的姓氏。王氏始祖是周灵王的太子，原本姓姬，名晋，字子乔。其族人因其为王族之后，遂以王为氏。自此，王氏一族开枝散叶，遍布华夏。',
    desc: '',
    sign_name: '',
    create_time: ''
})
// 获取人物纪念列表
const queryParams = ref({
    family_id: route.query.id
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: mu_list,
    params: queryParams.value
})
getLists()
// 获取集体信息
const getFamilyDetail = async () => {
    try {
        const res = await familyDetail({ id: Number(route.query.id) })
        familyInfo.value = res
        if (res.template_id !== 0) {
            selectBGinfo.value = templateData.value.find((item: any) => item.id == res.template_id) || {}
            tagColor.value = selectBGinfo.value.navBgColor || '#E3E0D8'
        }
    } catch (error) {
        console.error('获取集体信息失败:', error)
    }
}

// 人物纪念数据
const memorialPersons = ref([])
const graveyardList = ref([])

// 获取纪念馆列表
const getMu_list = async () => {
    try {
        const res = await mu_list({ family_id: Number(route.query.id), page_no: 1, page_size: 8 })
        graveyardList.value = res.list
        memorialPersons.value = res.list.slice(0, 6) // 首页只显示6个
    } catch (error) {
        console.error('获取纪念馆列表失败:', error)
    }
}

// 集体动态数据
const familyNews = ref([])
const totalArticles = ref([])
const totalArticlesCount = ref(0)
const dynamicList = ref([])
const cultureList = ref([])

// 获取集体文章列表
const getArticleDataList = async () => {
    try {
        const res = await article_list({ family_id: Number(route.query.id), page_no: 1, page_size: 10 })
        totalArticles.value = res.list
        totalArticlesCount.value = res.total
        familyNews.value = res.list.slice(0, 4) // 首页只显示4条动态
        dynamicList.value = res.list.filter((item: any)=>item.type == 2)
        cultureList.value = res.list.filter((item: any)=>item.type == 1)
    } catch (error) {
        console.error('获取文章列表失败:', error)
    }
}

// 留言列表数据
const leaveNoteList = ref([])

// 获取集体留言列表
const getLeaveDataList = async () => {
    try {
        const res = await jidian_list({ family_id: Number(route.query.id), page_no: 1, page_size: 10 })
        leaveNoteList.value = res.list
    } catch (error) {
        console.error('获取留言列表失败:', error)
    }
}

// 祭祀分类数据
const jidianCateList = ref([])
const jidianList = ref([])

// 获取祭祀分类
const getJidianCate = async () => {
    try {
        const res = await apiMuJidianCate()
        jidianCateList.value = res
        if (res.length > 0) {
            activeTab.value = res[0].id
            getJidianList(res[0].id)
        }
    } catch (error) {
        console.error('获取祭祀分类失败:', error)
    }
}

// 获取祭祀列表
const getJidianList = async (id: number) => {
    try {
        const res = await apiMuJidianList({ cid: id })
        jidianList.value = res
    } catch (error) {
        console.error('获取祭祀列表失败:', error)
    }
}

// 切换祭奠分类
const changejidian = (id: number) => {
    activeTab.value = id
    getJidianList(id)
}

// 选择祭品
const selectOffering = (offeringId: number) => {
    selectedOffering.value = offeringId
}

// 提交留言
const submitMessage = async (formEl: FormInstance | undefined) => {
    if (selectedOffering.value == 0) {
        alert('请选择祭品！')
        return
    }
    if (!formEl) return

    await formEl.validate((valid, fields) => {
        if (valid) {
            add_jidian({
                family_id: Number(route.query.id),
                jidian_id: selectedOffering.value,
                ...messageForm
            }).then((res) => {
                alert('留言已提交成功！')
                getLeaveDataList()
                // 重置表单
                messageForm.content = ''
                messageForm.sign_name = ''
                selectedOffering.value = 0
            }).catch((error) => {
                console.error('提交留言失败:', error)
                alert('提交失败，请重试！')
            })
        } else {
            console.log('表单验证失败:', fields)
        }
    })
}

// 导航切换
const goToPath = (path: string) => {
    pathType.value = path
    if (path == 'article1' || path == 'article2') {
        getArticleDataList()
    }
}

// 去纪念馆详情
const goToMuDetail = (mu_id: number) => {
    router.push('/memorialDetail?id=' + mu_id)
}

// 去文章详情
const oldPageType = ref('')
const articleInfo = ref()
const goToArticleDetail = (article_id: number) => {
    articleInfo.value = totalArticles.value.find((item: any) => item.id == article_id)
    oldPageType.value = pathType.value
    pathType.value = 'articleDetail'
    // router.push('/familyArticleDetail?id=' + article_id + '&family_id=' + route.query.id)
}

const pageTypeBack = () => {
    pathType.value = oldPageType.value
    oldPageType.value = ''
}


// 申请加入集体
const checkUserJoin = ref(false)
const applyJoin = async () => {
    try {
        // 这里可以添加申请加入的逻辑
        // 例如：调用API检查用户是否已加入，或者显示申请表单
        const res = await check_user_join({ family_id: Number(route.query.id) })
        if (res.is_join === 1) {
            checkUserJoin.value = true
            ElMessage.warning('您已经是该集体的成员了')
        } else {
            // 申请加入墓地
            await user_join({ family_id: Number(route.query.id) })
            ElMessage.success('申请已提交，请等待审核')
            // 这里可以添加更多申请逻辑
        }
    } catch (error) {
        ElMessage.error('申请失败，请稍后重试')
        console.error('申请加入失败:', error)
    }
}
// 申请墓地加入弹窗相关数据
const muJoinDialogVisible = ref(false)
const selectedMuId = ref<any>(null)
const availableMuList = ref([])



// 申请墓地加入，弹窗
const applyMuJoinOpen = async () => {
    try {
        // 获取可加入的墓地列表
        const res = await familyJoin_list({ family_id: Number(route.query.id) })
        availableMuList.value = res
        muJoinDialogVisible.value = true
        selectedMuId.value = null
    } catch (error) {
        ElMessage.error('获取墓地列表失败')
        console.error('获取墓地列表失败:', error)
    }
}

// 选择墓地
const selectMu = (muId: number) => {
    selectedMuId.value = muId
}

// 关闭弹窗
const handleDialogClose = () => {
    muJoinDialogVisible.value = false
    selectedMuId.value = null
}

// 确认加入墓地
const confirmMuJoin = async () => {
    if (!selectedMuId.value) {
        ElMessage.warning('请选择要加入的墓地')
        return
    }
    
    try {
        // 检查是否已加入该墓地
        const checkRes = await check_mu_join({ mu_id: selectedMuId.value, family_id: Number(route.query.id) })
        if (checkRes.is_join === 1) {
            ElMessage.warning('您已经加入了该墓地')
            return
        }
        
        // 申请加入墓地
        await mu_join({ mu_id: selectedMuId.value, family_id: Number(route.query.id) })
        ElMessage.success('申请已提交，请等待审核')
        handleDialogClose()
    } catch (error) {
        ElMessage.error('申请失败，请稍后重试')
        console.error('申请加入墓地失败:', error)
    }
}
// 查看二维码
const qrValueUrl = ref('https://cqjsyh.com/H5/pages/family/index?family_id=' + route.query.id)
const qrValue = ref('')
const dialogVisible = ref(false)
const qrCodeInfo = ref<any>(null)

// 打开二维码弹窗
const showQRCode = async (params: any) => {
    qrCodeInfo.value = params

    // 获取二维码图片URL
    const res = await index_share_img({ url: qrValueUrl.value,family_id: params.id })
    qrValue.value = res.url
    dialogVisible.value = true
}




// 页面初始化
onMounted(async () => {
    await getFamilyDetail()
    await getMu_list()
    await getLeaveDataList()
    await getArticleDataList()
    await getJidianCate()

    if (route.query.pathType) {
        pathType.value = route.query.pathType as string
    }

    const res = await check_user_join({ family_id: Number(route.query.id) })
    if (res.is_join === 1) {
        checkUserJoin.value = true
    }
})
</script>

<style scoped>
/* 整体页面样式 */
.family-page {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    background-color: #f5f3f0;
    min-height: 100vh;
    position: relative;
}
.bgImg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 顶部背景区域 */
.hero-section {
    position: relative;
    /* height: 200px; */
    background: linear-gradient(135deg, #d4c4a8 0%, #b8a082 100%);
    overflow: hidden;
}

.hero-background {
    position: relative;
    width: 100%;
    height: 100%;
}

.bg-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.family-title {
    font-size: 3rem;
    /* color: var(--tagColor); */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
    font-family: 'KaiTi', '楷体', serif;
}

/* 导航栏 */
.main-nav {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.nav-item {
    color: #000;
    text-decoration: none;
    padding: 15px 25px;
    display: block;
    transition: background-color 0.3s;
    font-size: 14px;
    cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 主要内容区域 */
.main-content {
    width: 100%;
    position: relative;
    /* max-width: 1200px; */
    
}
.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.page-main-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}
/* 左侧内容 */
.left-content {
    /* 移除整体背景，让各个section独立显示 */
}

.intro-section,
.memorial-section,
.news-section {
    padding: 25px;
    margin-bottom: 20px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.intro-section:hover,
.memorial-section:hover,
.news-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.intro-section {
    background: linear-gradient(135deg, #f9f7f4 0%, #faf8f5 100%);
}

.memorial-section {
    background: linear-gradient(135deg, #f4f7f9 0%, #f5f8fa 100%);
}

.news-section {
    background: linear-gradient(135deg, #f7f4f9 0%, #f8f5fa 100%);
    margin-bottom: 0;
}

.intro-section h2,
.memorial-section h2,
.news-section h2 {
    font-size: 18px;
    color: #333;
    margin: 0 0 15px 0;
    font-weight: bold;
}

.intro-section p {
    line-height: 1.8;
    color: #666;
    font-size: 14px;
    text-align: justify;
}

/* 人物纪念区 */
.memorial-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.memorial-item {
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.person-avatar {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background-color: #f0f0f0;
    object-fit: cover;
    margin-bottom: 8px;
}

.person-name {
    font-size: 12px;
    color: #333;
}

/* 集体动态 */
.news-list {
    margin-bottom: 15px;
}

.news-item {
    display: flex;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.news-avatar {
    margin-right: 12px;
}

.news-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.news-content {
    flex: 1;
}

.news-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}

.news-meta {
    font-size: 12px;
    color: #999;
}

.news-author {
    margin-right: 15px;
}

.more-news {
    text-align: center;
}

.more-news span {
    color: var(--tagColor);
    text-decoration: none;
    font-size: 14px;
}

.more-news span:hover {
    text-decoration: underline;
}

/* 右侧边栏 */
.right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.message-section,
.celebrity-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.message-section h3,
.celebrity-section h3 {
    font-size: 16px;
    color: #333;
    margin: 0 0 15px 0;
    text-align: center;
    font-weight: bold;
}

/* 追思留言表单 */
.form-row {
    margin-bottom: 15px;
    width: 100%;
}

.form-row label {
    display: inline-block;
    width: 50px;
    font-size: 14px;
    color: #333;
    vertical-align: top;
    margin-top: 8px;
}

.form-row input {
    width: calc(100%);
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-row textarea {
    width: calc(100%);
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
}

/* 祭品分类选择 */
.tribute-categories {
    margin-bottom: 15px;
    margin-top: 30px;
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.category-tab {
    padding: 2px 4px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
}

.category-tab:hover,
.category-tab.active {
    background-color: var(--tagColor);
    color: #000;
    border-color: var(--tagColor);
}

.offerings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.offering-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 80px;
}

.offering-item:hover,
.offering-item.active {
    border-color: var(--tagColor);
    background-color: #f9f9f9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 69, 19, 0.2);
}

.offering-item img {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    object-fit: cover;
    border-radius: 4px;
}

.offering-item span {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.2;
}

/* Element UI Plus 表单组件样式覆盖 */
.message-form .el-form-item {
    margin-bottom: 0;
}

.message-form .el-form-item__error {
    position: static;
    font-size: 12px;
    color: #f56c6c;
    margin-top: 5px;
    margin-left: 50px;
}

.custom-textarea .el-textarea__inner {
    width: calc(100%) !important;
    padding: 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    resize: vertical !important;
    min-height: 80px !important;
    font-family: inherit !important;
}

.custom-input .el-input__inner {
    width: calc(100% - 60px) !important;
    padding: 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: inherit !important;
}

.custom-textarea .el-textarea__inner:focus,
.custom-input .el-input__inner:focus {
    border-color: var(--tagColor) !important;
    box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2) !important;
}

.submit-btn.el-button {
    width: 100%;
    background-color: var(--tagColor) !important;
    border-color: var(--tagColor) !important;
    color: #000 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    transition: all 0.3s !important;
}

.submit-btn.el-button:hover {
    background-color: #6d3410 !important;
    border-color: #6d3410 !important;
}

.offering-item span {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.2;
}

.submit-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--tagColor);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #A0522D;
    color: white !important;
}

/* 同姓名人 */
.celebrity-list {
    max-height: 300px;
    overflow-y: auto;
}

.celebrity-item {
    display: flex;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.celebrity-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.celebrity-avatar {
    margin-right: 12px;
}

.celebrity-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: #f0f0f0;
}

.celebrity-info {
    flex: 1;
}

.celebrity-name {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 4px;
}

.celebrity-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 4px;
}

.celebrity-time {
    font-size: 11px;
    color: #999;
}

/* 文章页面布局样式优化 */
.content-wrapper {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* margin: 20px 0; */
    /* min-height: 500px; */
}

/* 左侧推荐文章栏样式 */
.sidebar {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 25px 20px;
    border-right: 1px solid #e9ecef;
    height: 100%;
    min-height: 500px;
    position: relative;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--tagColor), #A0522D);
}

.sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--tagColor);
    position: relative;
}

.sidebar-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30px;
    height: 2px;
    background: #A0522D;
}

.recommended-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommended-list li {
    margin-bottom: 12px;
    padding: 10px 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.recommended-list li:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.15);
    border-left-color: var(--tagColor);
}

.recommended-list li span {
    color: #495057;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    display: block;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

}

.recommended-list li:hover span {
    color: var(--tagColor);
    font-weight: 500;
}

/* 右侧主内容区样式 */
.main-content {
    padding: 25px 30px;
    background: white;
    height: 100%;
    min-height: 500px;
}

.main-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
    position: relative;
}

.main-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, var(--tagColor), #A0522D);
}

.articles-list {
    margin-bottom: 30px;
}

.articles-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-item {
    margin-bottom: 15px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #dee2e6;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.article-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(160, 82, 45, 0.1));
    transition: width 0.3s ease;
    z-index: 1;
}

.article-item:hover::before {
    width: 100%;
}

.article-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.15);
    border-left-color: var(--tagColor);
}

.article-title {
    color: #495057;
    font-size: 15px;
    line-height: 1.6;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-item:hover .article-title {
    /* color: var(--tagColor); */
    font-weight: 500;
}

.pagination-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.pagination-summary span {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.pagination-summary span:first-child {
    /* color: var(--tagColor); */
}

/* 人物纪念页面优化样式 */
.memorial-hall-enhanced {
    margin-bottom: 30px;
}

.person-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.person-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15) !important;
}

.person-card-content {
    text-align: center;
    padding: 5px 15px;
    position: relative;
    overflow: hidden;
}

.person-avatar-enhanced {
    margin-bottom: 15px;
    border: 3px solid #f0f0f0;
    transition: all 0.3s ease;
}

.person-card:hover .person-avatar-enhanced {
    border-color: var(--tagColor);
    transform: scale(1.05);
}

.person-name-enhanced {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.person-card:hover .person-name-enhanced {
    color: var(--tagColor);
}

.person-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #EADDCD; 
    /* background: linear-gradient(135deg, rgba(139, 69, 19, 0.9), rgba(160, 82, 45, 0.9)); */
    background: linear-gradient(135deg, rgba(234,221,205, 0.9), rgba(250, 222, 165, 0.9));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.person-card:hover .person-card-overlay {
    opacity: 1;
}

.view-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

/* 追思留言页面优化样式 */
.guestbook-list-enhanced {
    padding: 20px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-radius: 12px;
    min-height: 400px;
}

.timeline-enhanced {
    padding: 20px 0;
}

.timeline-item-enhanced {
    margin-bottom: 20px;
}

.message-card {
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
    background: white;
}

.message-card:hover {
    border-color: var(--tagColor);
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.1) !important;
}

.message-content {
    padding: 20px;
}

.message-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.message-avatar {
    margin-right: 15px;
    border: 2px solid #f0f0f0;
    transition: border-color 0.3s ease;
}

.message-card:hover .message-avatar {
    border-color: var(--tagColor);
}

.message-info {
    flex: 1;
}

.message-author {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.message-time {
    font-size: 12px;
    color: #999;
}

.message-text {
    margin-top: 10px;
}

.message-content-text {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    display: block;
    text-align: justify;
}

.empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Element Plus Timeline 样式覆盖 */
.timeline-enhanced :deep(.el-timeline-item__timestamp) {
    color: var(--tagColor);
    font-weight: 500;
    font-size: 12px;
}

.timeline-enhanced :deep(.el-timeline-item__node) {
    background-color: var(--tagColor);
    border-color: var(--tagColor);
}

.timeline-enhanced :deep(.el-timeline-item__wrapper) {
    padding-left: 30px;
}

.timeline-enhanced :deep(.el-timeline-item__tail) {
    border-left: 2px solid #e8e8e8;
}

/* 页面标题优化 */
.page-main-title {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
    background: linear-gradient(135deg, var(--tagColor), #A0522D);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.2);
}

.page-main-title span {
    font-size: 24px;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .content-wrapper {
        margin: 10px 0;
    }
    
    .sidebar {
        min-height: auto;
        padding: 20px 15px;
    }
    
    .main-content {
        padding: 20px 15px;
        min-height: auto;
    }
    
    .main-title {
        font-size: 20px;
    }
    
    .sidebar-title {
        font-size: 16px;
    }

    .memorial-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .offerings {
        grid-template-columns: repeat(3, 1fr);
    }

    .family-title {
        font-size: 2rem;
    }
    
    .person-card-content {
        padding: 15px 10px;
    }
    
    .person-avatar-enhanced {
        width: 60px !important;
        height: 60px !important;
    }
    
    .message-content {
        padding: 15px;
    }
    
    .page-main-title span {
        font-size: 20px;
    }
    
    .guestbook-list-enhanced {
        padding: 15px;
    }
}
.person-list{
    width: 100%;
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(6, 1fr);
}

/* 浮动申请加入按钮样式 */
/* .floating-apply-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
} */
/* 浮动申请加入按钮样式 */
.floating-apply-btn {
    position: fixed;
    bottom: 80px;
    right: 30px;
    z-index: 1000;
    border-radius: 50px;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(64, 158, 255, 0.3);
    transition: all 0.3s ease;
}


/* 浮动二维码按钮样式 */
.floating-qr-btn {
    position: fixed;
    bottom: 142px;
    right: 30px;
    width: 60px;
    height: 60px;
    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.floating-qr-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* 二维码弹窗样式 */
.qr-code-container {
    text-align: center;
    padding: 20px;
}

.qr-code-image {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.qr-code-text p {
    margin: 10px 0;
    color: #666;
}

.qr-url {
    font-size: 12px;
    color: #999;
    word-break: break-all;
    background: #f5f5f5;
    padding: 8px;
    border-radius: 4px;
}

/* 响应式设计更新 */
@media (max-width: 768px) {
    .floating-apply-btn,
    .floating-qr-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .floating-apply-btn {
        bottom: 20px;
        right: 20px;
    }
    
    .floating-qr-btn {
        bottom: 80px;
        right: 20px;
    }
}

/* 墓地选择列表样式 */
.mu-list-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.mu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: #fafafa;
    min-height: 140px;
}

.mu-item:hover {
    border-color: #409eff;
    background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.2);
}

.mu-item.selected {
    border-color: #409eff;
    background: #e6f7ff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.mu-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.mu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mu-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
}

.selection-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: #409eff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
    animation: scaleIn 0.2s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .mu-list-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .mu-item {
        padding: 15px 10px;
        min-height: 120px;
    }
    
    .mu-avatar {
        width: 60px;
        height: 60px;
    }
    
    .mu-name {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .mu-list-container {
        grid-template-columns: 1fr;
    }
}
</style>